<template>
  <!-- 交易页面 -->
  <view>
    <view class="navigator-box">
      
    </view>
      <view class="title" >
        <text :class="iscolor==i?'active1':''" v-for="(item,i) in list" :key="i" @click="btntitle(i)">{{item.title}}</text>
      </view>
      <!-- 我的策略 -->
      <view class="" v-if="iscolor==0">
        <view class="mycelue">
            <view class="btn-celue">
              <view class="celueku" :class="!colorisshow?'active':''" @click="celueku">策略库</view>
              <view class="celueku" :class="colorisshow?'active':''" @click="zhixingzhong">执行中</view>
            </view>
            <view @click="history">
              <uni-icons size="24" color="#FFFFFF" type="more-filled"></uni-icons>
            </view>
          </view>
          <!-- 策略库内容 -->
          <view class="mycelue-content celueku" v-if="isshow">
            <!-- 新手推荐标题 -->
            <view class="recommend">
              <view class="recommend-box"></view>
              <text>新手推荐</text>
            </view>
            <!-- 新手推荐内容 -->
            <view class="tuijian-box" @click="myceluedetail">
              <view class="bibi">
                <view class=""></view>
                <view class="bibi-text">币币</view>
              </view>
              <view class="tuijian-con">
                <view class="left-img">
                  <image src="../../static/logo.png" mode=""></image>
                </view>
                <view class="shuxian"></view>
                <view class="tuijian-right">
                  <view class="top-title">
                    <text>海风马丁</text>
                    <view class="title-right-box">
                      <uni-icons type="person" size="18" color="#556181"></uni-icons>
                      <text class="title-right">32154</text>
                    </view>
                  </view>
                  <text class="bottom-title">
                    进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入
                  </text>
                </view>
              </view>
            </view>
            <!-- 新手推荐内容 -->
            <!-- 新手推荐标题 -->
            <view class="recommend">
              <view class="recommend-box"></view>
              <text>合约策略</text>
            </view>
            <!-- 合约策略内容 -->
            <view class="tuijian-box">
              <view class="bibi">
                <view class=""></view>
                <view class="bibi-text heyue">合约</view>
              </view>
              <view class="tuijian-con">
                <view class="left-img">
                  <image src="../../static/logo.png" mode=""></image>
                </view>
                <view class="shuxian"></view>
                <view class="tuijian-right">
                  <view class="top-title">
                    <text>海风马丁</text>
                    <view class="title-right-box">
                      <uni-icons type="person" size="18" color="#556181"></uni-icons>
                      <text class="title-right">32154</text>
                    </view>
                  </view>
                  <text class="bottom-title">
                    进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入
                  </text>
                </view>
              </view>
            </view>
            <!-- 合约策略内容 -->
            <!-- 币币策略标题 -->
            <view class="recommend">
              <view class="recommend-box"></view>
              <text>币币策略</text>
            </view>
            <!-- 币币策略内容 -->
            <view class="tuijian-box">
              <view class="bibi">
                <view class=""></view>
                <view class="bibi-text">币币</view>
              </view>
              <view class="tuijian-con">
                <view class="left-img">
                  <image src="../../static/logo.png" mode=""></image>
                </view>
                <view class="shuxian"></view>
                <view class="tuijian-right">
                  <view class="top-title">
                    <text>海风马丁</text>
                    <view class="title-right-box">
                      <uni-icons type="person" size="18" color="#556181"></uni-icons>
                      <text class="title-right">32154</text>
                    </view>
                  </view>
                  <text class="bottom-title">
                    进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入进阶版马丁，丰富的补仓投入
                  </text>
                </view>
              </view>
            </view>
            <!-- 币币策略内容 -->
          </view>
          <!-- 执行中内容 -->
          <view class="mycelue-zhixing celueku" v-else>
            执行中
          </view>
        
      </view>
      <!-- 策略商城 -->
      <view class="" v-if="iscolor==1">
        <view class="celue-shop" @click="celueshopdetail">
            <text class="text-bibi">币币</text>
            <view class="shop-left">
              <view class="shop-left-title">
                <text class="shop-title">海啸马丁追踪策略</text>
                <text class="shop-v">V2x6ky</text>
              </view>
              <text class="shop-right">+903.34%</text>
            </view>
            <view class="shop-bottom">
              <text class="shop-bottom-left">更抗跌，更高频，更灵活！更抗跌，更高频，更灵活！更抗跌，更高频，更灵活！更抗跌，更高频，更灵活！</text>
              <text>年化收益率</text>
            </view>
          </view>
          <view class="celue-shop" @click="celueshopdetail">
            <text class="text-bibi">币币</text>
            <view class="shop-left">
              <view class="shop-left-title">
                <text class="shop-title">海啸马丁追踪策略</text>
                <text class="shop-v">V2x6ky</text>
              </view>
              <text class="shop-right">+903.34%</text>
            </view>
            <view class="shop-bottom">
              <text class="shop-bottom-left">更抗跌，更高频，更灵活！更抗跌，更高频，更灵活！更抗跌，更高频，更灵活！更抗跌，更高频，更灵活！</text>
              <text>年化收益率</text>
            </view>
          </view>
        
      </view>
      <!-- 跟单 -->
      <view class="" v-if="iscolor==2">
        <view class="search-box">
            <view class="search" @click="gendansearch">
              <uni-icons type="search" color="#b2bdd9"></uni-icons>
              <text>输入发起人昵称</text>
            </view>
          </view>
          <view class="btn-gendan">
            <text class="gendan-btns" :class="gendanisshowone ==1?'gendan-active':''" @click="lianghua(1)">量化托管</text>
            <text class="gendan-btns" :class="gendanisshowone ==2?'gendan-active':''" @click="lianghua(2)">策略</text>
            <text class="gendan-btns" :class="gendanisshowone ==3?'gendan-active':''" @click="lianghua(3)">发起人</text>
          </view>
          <view class="" v-if="gendanisshowone==1">
            <view class="lianghua-list" @click="agreement">
              <text class="text-bibi">币币</text>
              <view class="gendantop">
                <view class="gendan-left">
                  <view class="gendan-left-title">
                    +34.344%
                  </view>
                  <view class="gendan-left-con">
                    平均年化
                  </view>
                </view>
                <view class="gendan-right">
                  <view class="gendan-right-top">
                    <text>硬哥铁拳量化</text>
                    <text class="gendan-right-v">V34U34</text>
                  </view>
                  <view class="gendan-right-center">
                    <text>huobi</text>
                    <text>Binance</text>
                    <text>Okex</text>
                  </view>
                  <view class="gendan-right-bottom">
                    硬哥铁拳推出的量化项目！稳健保福建省快递费
                  </view>
                </view>
              </view>
              <view class="gendanbottom">
                <text>累计投入、收益32443/4324234</text>
                <text>硬哥玩币</text>
              </view>
            </view>
           <view class="lianghua-bottom">
              <view class="">跟单数据实时更新，历史表现不能代表未来收益；</view>
              <view class="">年化收益率较低的数据将不会被展示在列表中；</view>
              <view class="">市场有风险，投资需谨慎。</view>
            </view>
          </view>
          <view class="" v-if="gendanisshowone==2">
            <text class="celue-btns" :class="celueisshowone ==1?'activecelue':''" @click="btnsall(1)">全部</text>
            <text class="celue-btns" :class="celueisshowone ==2?'activecelue':''" @click="btnsall(2)">币币</text>
            <text class="celue-btns" :class="celueisshowone ==3?'activecelue':''" @click="btnsall(3)">合约</text>
            <!-- 全部 -->
            <view class="" v-if="celueisshowone==1">
              <view class="lianghua-list heyue-list" @click="gendancelue">
                <text class="heyue-title">合约</text>
                <view class="heyue-con">
                  <view class="">
                    <text class="mading-title">合约马丁</text>
                    <text class="heyue-v">okex</text>
                  </view>
                  <view class="heyue-baifenbi">
                    <text class="heyue-baifen">+46545656%</text>
                    <view class="">
                      年化收益率
                    </view>
                  </view>
                </view>
                <view class="quanbu-bottom">
                  <view class="quanbu-bottom-left">
                    <image src="../../static/active-home.png" mode=""></image>
                    <text>19834234411</text>
                  </view>
                  <view class="quanbu-bottom-right">
                    3021/02/10 03:02
                  </view>
                </view>
              </view>
        
            </view>
            <!-- 币币 -->
            <view class="" v-if="celueisshowone==2">
              <view class="lianghua-list heyue-list">
                <text class="heyue-title">合约</text>
                <view class="heyue-con">
                  <view class="">
                    <text class="mading-title">合约马丁</text>
                    <text class="heyue-v">okex</text>
                  </view>
                  <view class="heyue-baifenbi">
                    <text class="heyue-baifen">+46545656%</text>
                    <view class="">
                      年化收益率
                    </view>
                  </view>
                </view>
                <view class="quanbu-bottom">
                  <view class="quanbu-bottom-left">
                    <image src="../../static/active-home.png" mode=""></image>
                    <text>19834234411</text>
                  </view>
                  <view class="quanbu-bottom-right">
                    3021/02/10 03:02
                  </view>
                </view>
              </view>
        
            </view>
            <!-- 合约 -->
            <view class="" v-if="celueisshowone==3">
              <view class="lianghua-list heyue-list">
                <text class="heyue-title">合约</text>
                <view class="heyue-con">
                  <view class="">
                    <text class="mading-title">合约马丁</text>
                    <text class="heyue-v">okex</text>
                  </view>
                  <view class="heyue-baifenbi">
                    <text class="heyue-baifen">+46545656%</text>
                    <view class="">
                      年化收益率
                    </view>
                  </view>
                </view>
                <view class="quanbu-bottom">
                  <view class="quanbu-bottom-left">
                    <image src="../../static/active-home.png" mode=""></image>
                    <text>19834234411</text>
                  </view>
                  <view class="quanbu-bottom-right">
                    3021/02/10 03:02
                  </view>
                </view>
              </view>
             
            </view>
          </view>
          <!-- 发起人内容 -->
          <view class="woshi" v-if="gendanisshowone==3">
            <view class="lianghua-list heyue-list"  @click="gendanintiator">
              <text class="heyue-title">合约</text>
              <view class="heyue-con">
                <view class="heyue-con-left">
                  <view class="heyue-con-img">
                    <image src="../../static/active-home.png" mode=""></image>
                    <view class="faqiren">
                      <text class="mading-title">合约马丁</text>
                      <view class="faqiren-v">
                        okex
                      </view>
        
                    </view>
                  </view>
                </view>
                <view class="heyue-baifenbi">
                  <text class="heyue-baifen">+46545656%</text>
                  <view class="">
                    年化收益率
                  </view>
                </view>
              </view>
              <view class="quanbu-bottom">
                <view class="quanbu-bottom-left">
                  <text>19834234411</text>
                </view>
                <view class="quanbu-bottom-right">
                  3021/02/10 03:02
                </view>
              </view>
            </view>
            <view class="lianghua-list heyue-list">
              <text class="heyue-title">合约</text>
              <view class="heyue-con">
                <view class="heyue-con-left">
                  <view class="heyue-con-img">
                    <image src="../../static/active-home.png" mode=""></image>
                    <view class="faqiren">
                      <text class="mading-title">合约马丁</text>
                      <view class="faqiren-v">
                        okex
                      </view>
        
                    </view>
                  </view>
                </view>
                <view class="heyue-baifenbi">
                  <text class="heyue-baifen">+46545656%</text>
                  <view class="">
                    年化收益率
                  </view>
                </view>
              </view>
              <view class="quanbu-bottom">
                <view class="quanbu-bottom-left">
                  <text>19834234411</text>
                </view>
                <view class="quanbu-bottom-right">
                  3021/02/10 03:02
                </view>
              </view>
            </view>
            <view class="lianghua-list heyue-list">
              <text class="heyue-title">合约</text>
              <view class="heyue-con">
                <view class="heyue-con-left">
                  <view class="heyue-con-img">
                    <image src="../../static/active-home.png" mode=""></image>
                    <view class="faqiren">
                      <text class="mading-title">合约马丁</text>
                      <view class="faqiren-v">
                        okex
                      </view>
            
                    </view>
                  </view>
                </view>
                <view class="heyue-baifenbi">
                  <text class="heyue-baifen">+46545656%</text>
                  <view class="">
                    年化收益率
                  </view>
                </view>
              </view>
              <view class="quanbu-bottom">
                <view class="quanbu-bottom-left">
                  <text>19834234411</text>
                </view>
                <view class="quanbu-bottom-right">
                  3021/02/10 03:02
                </view>
              </view>
            </view>
            <view class="lianghua-list heyue-list">
              <text class="heyue-title">合约</text>
              <view class="heyue-con">
                <view class="heyue-con-left">
                  <view class="heyue-con-img">
                    <image src="../../static/active-home.png" mode=""></image>
                    <view class="faqiren">
                      <text class="mading-title">合约马丁</text>
                      <view class="faqiren-v">
                        okex
                      </view>
            
                    </view>
                  </view>
                </view>
                <view class="heyue-baifenbi">
                  <text class="heyue-baifen">+46545656%</text>
                  <view class="">
                    年化收益率
                  </view>
                </view>
              </view>
              <view class="quanbu-bottom">
                <view class="quanbu-bottom-left">
                  <text>19834234411</text>
                </view>
                <view class="quanbu-bottom-right">
                  3021/02/10 03:02
                </view>
              </view>
            </view>
            <view class="gendantitle" @click="gendanintiator">
              <text>我是跟单发起人</text>
              <uni-icons type="arrowright"></uni-icons>
            </view>
          </view>
        
      </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        celueisshowone: true,
        gendanisshowone: true,
        isshow: true,
        colorisshow: false,
        iscolor:'',
        list:[{
          title:'我的策略'
        },{
          title:'策略商城'
        },{
          title:'跟单'
        }]
      }
    },
    onShow() {
      this.swiperCurrent=getApp().globalData.swiperCurrent
    },
    methods: {
      btntitle(i){
        this.iscolor=i
      },
      celueku() {
        this.colorisshow = !this.colorisshow
        this.isshow = !this.isshow
      },
      zhixingzhong() {
        this.colorisshow = !this.colorisshow
        this.isshow = !this.isshow
      },
      // 历史记录
      history() {
        uni.navigateTo({
          url: '../history/history'
        })
      },
      // 跟单搜索
      gendansearch() {
        uni.navigateTo({
          url: '../../subpkg/gendansearch/gendansearch'
        })
      },
      // 量化托管按钮
      lianghua(index) {
        this.gendanisshowone = index
      },
      // 策略下的按钮显示与隐藏
      btnsall(index) {
        this.celueisshowone = index
      },
      // 跳转到跟单发起人页面
      gendanintiator(){
        uni.navigateTo({
          url:'../../subpkg/gendanInitiator/gendanInitiator'
        })
      },
      // 跟单策略
      gendancelue(){
        uni.navigateTo({
          url:'../../subpkg/gendancelue/gendancelue'
        })
      },
      // 量化托管使用协议
      agreement(){
        uni.navigateTo({
          url:'../../subpkg/agreement/agreement'
        })
      },
      // 策略商城列表详情页面
      celueshopdetail(){
        uni.navigateTo({
          url:'../../subpkg/celueshop-detail/celueshop-detail'
        })
      },
      // 我的策略详情页面
      myceluedetail(){
        uni.navigateTo({
          url:'../../subpkg/mycelue-detail/mycelue-detail'
        })
      }
    }
  }
</script>

<style>
  page {
    background-color: #091430;
  }
  .navigator-box{
    height: 66rpx;
    width: 100%;
    background-color: #FFFFFF;
    color:"#FFFFFF";
    z-index: 999;
  }
    .title{
      display: flex;
      justify-content: space-around;
      font-size: 32rpx;
      color: #b3bedf;
      margin: 20rpx 0;
    }
    .active1{
      color: #FFFFFF;
      font-size: 36rpx;
    }

    
    .mycelue {
      display: flex;
      justify-content: space-between;
      color: #FFFFFF;
      font-size: 32rpx;
      margin: 40rpx 0;
      padding: 0 20rpx;
    }
    
    .active {
      color: #FFFFFF;
      background-color: #1179ff;
      border-radius: 20rpx;
    }
    
    .btn-celue {
      display: flex;
      background-color: #131c3b;
      border-radius: 20rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
    
    .celueku {
      padding: 0rpx 20rpx;
    }
    
    .zhixingzhong {
      padding: 0rpx 20rpx;
    }
    
    .recommend {
      display: flex;
      color: #FFFFFF;
      height: 32rpx;
      line-height: 32rpx;
      margin: 10rpx 0;
    }
    
    .recommend-box {
      height: 100%;
      width: 6rpx;
      background-color: #007AFF;
      margin: 0 10rpx;
      border-radius: 8rpx;
    }
    
    .tuijian-box {
      height: 240rpx;
      background-color: #121d3b;
      border-radius: 20rpx;
      overflow: hidden;
      margin: 16rpx 0 24rpx;
    
    }
    
    .bibi {
      display: flex;
      justify-content: flex-end;
      color: #1669ce;
    }
    
    .heyue {
      color: red;
    }
    
    .bibi-text {
      background-color: #102753;
      border-radius: 15rpx;
      padding: 6rpx;
      font-size: 24rpx;
    }
    
    .tuijian-con {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 180rpx;
    }
    
    .left-img {
      width: 120rpx;
      height: 120rpx;
      margin: 0 50rpx;
    }
    
    .left-img image {
      width: 120rpx;
      height: 100%;
    }
    
    .shuxian {
      width: 4rpx;
      height: 70%;
      background-color: #1a2543;
      margin-right: 20rpx;
    }
    
    .tuijian-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #556181;
      font-size: 28rpx;
    }
    
    .top-title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    
    .title-right-box {
      border: 1px solid #1a2545;
      border-radius: 20rpx 20rpx 20rpx 0;
    }
    
    .top-title text {
      font-size: 36rpx;
      color: #FFFFFF;
      margin-right: 20rpx;
    }
    
    .bottom-title {
      margin-top: 10rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 限制在一个块元素显示的文本的行数 */
      -webkit-line-clamp: 2;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-box-orient: vertical;
    }
    
    .top-title .title-right {
      font-size: 28rpx !important;
      color: #556181;
      margin-left: -10rpx;
    }
    
    /* 策略商城样式 */
    .celue-shop {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      height: 200rpx;
      margin: 20rpx 20rpx 0;
      background-color: #121d3b;
      border-radius: 10rpx;
      padding: 0 40rpx;
    }
    
    .shop-left {
      display: flex;
      justify-content: space-between;
    }
    
    .shop-title {
      color: #FFFFFF;
      font-size: 32rpx
    }
    
    .shop-v {
      color: #b8c3e1;
      font-size: 24rpx;
      margin-left: 10rpx;
    }
    
    .shop-right {
      color: red;
      font-size: 32rpx;
    }
    
    .text-bibi {
      position: absolute;
      right: 0;
      top: 0;
      background-color: #1a3d71;
      padding: 0 6rpx;
      border-radius: 6rpx;
      color: #007AFF;
    }
    
    .shop-bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 15rpx;
      color: #7782a0;
      font-size: 26rpx;
    }
    
    .shop-bottom-left {
      height: 35rpx;
      width: 70%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    
    .search-box {
      position: sticky;
      background-color: #121d39;
      padding: 20rpx 40rpx;
      margin: 10rpx 0;
      color: #b2bdd9;
      font-size: 24rpx;
    }
    
    .search {
      background-color: #0a1332;
      padding: 10rpx;
    }
    
    .search text {
      margin-left: 15rpx;
    }
    
    .btn-gendan {
      margin: 30rpx 0;
    }
    
    .gendan-btns {
      padding: 6rpx 20rpx;
      border-radius: 20rpx;
      width: 100%;
      background-color: #121d39;
      margin: 10rpx 20rpx;
      color: #b9c4e0;
    }
    
    .gendan-active {
      background-color: #007AFF;
      color: #FFFFFF;
    }
    
    .lianghua-list {
      position: relative;
      height: 280rpx;
      background-color: #131c3d;
      border-radius: 20rpx;
      margin: 20rpx;
      color: #7381a0;
      padding: 0 40rpx;
    }
    
    .gendanbottom {
      display: flex;
      justify-content: space-between;
      color: #6d7997;
      height: 80rpx;
      line-height: 80rpx;
      border-top: 2rpx solid #A4AFCB;
    }
    
    .gendantop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 200rpx;
    }
    
    .gendan-left {
      width: 40%;
    }
    
    .gendan-left-title {
      font-size: 38rpx;
      color: #da4f83;
    }
    
    .gendan-right {
      width: 60%;
    }
    
    .gendan-right-top {
      color: #FFFFFF;
      font-size: 34rpx;
    }
    
    .gendan-right-top text:nth-child(2) {
      margin-left: 10rpx;
      font-size: 24rpx;
      background-color: #1c2b4a;
      padding: 2rpx 10rpx;
    }
    
    .gendan-right-center {
      margin: 10rpx 0;
    }
    
    .gendan-right-center text {
      margin-right: 20rpx;
      padding: 2rpx 10rpx;
      background-color: #1c2b4a;
      font-size: 22rpx;
    }
    
    .gendan-right-bottom {
      width: 100%;
      height: 30rpx;
      line-height: 30rpx;
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .lianghua-bottom {
      margin-top: 60rpx;
      padding: 0 60rpx;
      color: #737da0;
      font-size: 24rpx;
    }
    
    .heyue-list {
      padding: 0;
      border-radius: 10rpx;
    }
    
    .celue-btns {
      color: #a5b0cc;
      font-size: 24rpx;
      padding: 6rpx 40rpx;
      background-color: #121d39;
      margin-left: 20rpx;
      border-radius: 30rpx;
    }
    
    .activecelue {
      color: #FFFFFF;
      background-color: #007AFF;
    }
    
    .heyue-title {
      position: absolute;
      top: 0;
      right: 0;
      color: red;
      font-size: 24rpx;
      padding: 4rpx;
      background-color: #1a3d71;
      border-radius: 10rpx;
    }
    
    .quanbu-bottom {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #202b49;
      padding: 0 20rpx;
    }
    
    .quanbu-bottom image {
      width: 60rpx;
      height: 60rpx;
      vertical-align: middle;
      margin: 10rpx;
    }
    
    .heyue-con {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 200rpx;
      padding: 40rpx;
    }
    
    .mading-title {
      color: #FFFFFF;
      font-size: 34rpx;
      margin-right: 16rpx;
    }
    
    .heyue-v {
      font-size: 24rpx;
      padding: 2rpx 14rpx;
      border: 1px solid #1b2645;
      border-radius: 20rpx;
      color: #FFFFFF;
    }
    
    .heyue-baifen {
      font-size: 36rpx;
      color: #ff0000;
      margin-bottom: 10rpx;
    }
    
    .heyue-baifenbi {
      text-align: end;
    }
    
    .heyue-con-img {
      display: flex;
      justify-content: flex-start;
    }
    
    .heyue-con-img image {
      width: 70rpx;
      height: 70rpx;
      margin-right: 30rpx;
    }
    
    .faqiren {
      display: flex;
      flex-direction: column;
    }
    
    .faqiren-v {
      /* padding: 2rpx 6rpx; */
      border: 1px solid #1b2645;
      color: #FFFFFF;
      margin-top: 6rpx;
      font-size: 24rpx;
      text-align: center;
    }
    .gendantitle{
      position: fixed;
      bottom: 120rpx;
      width: 80%;
      display: flex;
      justify-content: space-between;
      height: 70rpx;
      line-height:70rpx;
      background-color: #007AFF;
      border-radius: 40rpx;
      padding: 0 40rpx;
      margin: 0 10%;
      color: #FFFFFF;
    }
   
</style>
